<template>
	<view>
		<uni-nav-bar height="128px" style="" class='navBar' shadow backgroundColor='#3286ed'  color="#fff"   >
			<view slot="left" style="height: 88px;padding-top: 40px;margin-top: 20px">
				<view class="navbar_left" @click="back">
					<u-icon color='#fff' name="arrow-left"></u-icon>
					<view style="font-size: 16px;">返回</view>
				</view>
			</view>
			<view style="display: flex;justify-content: center;height: 88px;padding-top: 53px;margin-top: 15px" class="input-view">
				<u-search @change="changeResult" style="width: 258px;" :showAction="false" v-model="searchForm.value" shape="square"></u-search>
			</view>
			<view slot="right" style="height: 88px;padding-top: 40px;margin-top: 15px;margin-right: 5px;">
				<view class="navbar_left" @click="addSubmit">
					<u-icon name="plus" color="#fff" size="25px"></u-icon>
				</view>
			</view>
		</uni-nav-bar>
		
		<!-- tab栏 -->
		  <u-tabs :list="list" :current="index" style='margin-top: 5px;background-color: #fff;'
		   itemStyle="padding:0 20px; height: 40px;" @change="changeFn"
		   lineWidth="104rpx" lineColor="#49b2f1" :activeStyle="{ fontWeight:'bold' }"></u-tabs>
		   
		   <view>
			   <view class="list" v-for="(item,index) in quanestList" :key="index" >
				   
				   <a :href="`http://101.132.141.5:8081${item.frontPhoto}`">
				       <u--image   :showLoading="true" :src="`http://101.132.141.5:8081${item.frontPhoto}`" width="130px" height="80px"></u--image>
				   </a>
			       <view class="list_right" @click="infoFn(item.id)">
					   <view>
					   		 <span style="color:#49b2f1 ;" v-if="item.modelName==1">德业</span>
					   		<span style="color:#49b2f1 ;" v-if="item.modelName==2">德业</span>
					   </view>
					   <view style="margin-bottom: 5px; color: #49b2f1;">
					   	<span>型号：</span> <span>{{item.model}}</span>
					   </view>
					   <view>{{item.faultCodes}}</view>
					    
					   
				   </view>
			   </view>
		   </view>
		 <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { login } from '../../api/login'
import {listquestionApi,addQuestion,getQusttionInfo,editQuestionApi,listquestionApi2} from '@/api/question.js'
	export default {
		data(){
			return{
				index:0,
				list:[
					{ name: '全部'},
					{ name: '除湿机'},
					{ name: '干燥机'},
					{ name: '机器配件'},
					],
					searchForm:{value:''},
					quanestList:[],
					pageNum:1,
					pageSize:10,
					total:0,
					tabelModel:'',
			}
			
		},
		created() {
			this.initData()
		},
		onReachBottom(){
			if(this.pageSize * this.pageNum < this.total){
				this.pageNum++
				listquestionApi({machineType:this.tabelModel,pageNum:this.pageNum,pageSize:this.pageSize}).then(res=>{
					this.quanestList.push(...res.rows)
					 
				})
			}else{
			this.$refs.uToast.show({
				type:"warning",
				message:'别划了，我是有底线的'
			})
			}
		},
		onPullDownRefresh(){
			this.initData()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		methods:{
			
			async changeResult(value){
				 console.log(value);
				let res=await listquestionApi2({model:value})
				this.quanestList=res.rows
			},
			async initData(){
				let res=await listquestionApi({machineType:this.tabelModel})
				this.quanestList=res.rows
				this.total=res.total
			},
			
			addSubmit(){
				uni.navigateTo({
					url:'/pages/questions/addQuestions'
				})
			},
			// 详情
			infoFn(val){
				console.log(val);
				uni.navigateTo({
					url:"/pages/questions/questionsDetails?id="+val
				})
			},
			changeFn(e){
				this.index=e.index
				if(e.index==0){
					this.tabelModel=null
				}else{
					this.tabelModel=e.name
				}
				
				this.initData()
			},
			back(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar_left{
		display: flex;
	}
	.navbar_left view{
		font-size: 13px;
	}
	.input-view{
		padding: 5px 0px 5px 10px;
		
	}
	.list{
		background-color: #fff;
		display: flex;
		// justify-content: space-between;
		margin-top: 5px;
		height: 110px;
		padding: 15px;
	}
	.list_right{
		flex: 1;
		margin-left: 10px;
		position: relative;
	}
	.details{
		position: absolute;
		right: 0;
		bottom: 0;
		width: 60px;
		height: 22px;
		line-height: 22px;
		background-color: #f8b551;
		color: #fff;
		font-size: 13px;
		text-align: center;
		border-radius: 5px;
	}
</style>